<template>
	<div class="main">
		<div class="headMain">
			<div class="head">
				<div class="tag headOne">
					<el-tag>艺术来源生活</el-tag>
				</div>
				<div class="dropdown headTwo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
							<div class="demo-basic--circle">
								<div class="block">
									<el-avatar :size="50" :src="circleUrl"></el-avatar>
								</div>
							</div>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item icon="el-icon-warning" @click="signOut">退出</el-dropdown-item>
								<!-- 			<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
							<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
							<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
							<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item> -->
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>

			</div>
			<div class="navigation">
				<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
				 background-color="transparent" text-color="#ffffff" active-text-color="#57f9f4">
					<el-menu-item index="demo1">首页</el-menu-item>
					<el-menu-item index="sqldemo">SQL模拟练习</el-menu-item>
					<el-menu-item index="douyu">模拟斗鱼直播</el-menu-item>
					<el-menu-item index="administrator">管理员页面</el-menu-item>
					<el-menu-item index="detaexhibition">数据展示</el-menu-item>
					<el-menu-item index="resume">网页简历</el-menu-item>
					<el-menu-item index="staticvuepage">静态VUE页面</el-menu-item>
				</el-menu>
			</div>
		</div>
		<keep-alive>
			<component v-bind:is="currentTabComponent"></component>
		</keep-alive>
		<img ref="img" :src="imgSrc.img" class="suspension" @mouseover="suspension(true)" @mouseleave="suspensionTwo" @click="dialogVisible=true" />
		<div>
			<el-dialog title="提示" v-model="dialogVisible" width="30%" :before-close="handleClose">
				<span>这是一段信息</span>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					</span>
				</template>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	import Demo1 from '../demoOne/demo1.vue';
	import sqldemo from '../demoTwo/sqldemo.vue'
	import douyu from '../douyu/DouYuOne.vue';
	import administrator from '../administrators/administrator.vue'
	import detaexhibition from '../dataexhibition/dataexhibition.vue'
	import staticvuepage from '../staticvuepage/staticvuepage.vue'
	import resume from '../resume/resume.vue'
	import {
		get
	} from '../../plugin/http.js';
	export default {
		name: 'home',
		components: {
			Demo1,
			sqldemo,
			douyu,
			administrator,
			detaexhibition,
			staticvuepage,
			resume
		},
		data: () => ({
			activeIndex2: 'demo1',
			currentTabComponent: 'demo1',
			dialogVisible: false,
			imgSrc: {
				img: require('@/assets/static/home/1.gif')
			},
			srcStatus: false,
			distanceRight: 20,
			distanceLeft: 20,
			time: null,
			circleUrl: require('@/assets/static/home/3.jpg')
		}),
		created: function() {
			//this.suspension(false);
		},
		methods: {
			handleSelect(key, keyPath) {
				this.currentTabComponent = keyPath[0];
			},
			signOut() {
				//清除token
				localStorage.removeItem('token');
				this.$router.push('/login');
			},
			suspension(value) {
				/*动画设计： 
				 默认小熊，来回运动，鼠标移入切换图片，停止移动
				 注意：清除计时器时，先清理一次才可以，在其他方法清除会出现问题，必须在同一个方法里
				 */
				//this.dialogVisible = true;
				//使用定时器完成动画
				const that = this;
				const imgsuspension = document.getElementsByClassName('suspension');
				//定义运动距离

				clearInterval(this.time);
				this.time = setInterval(function() {
					if (that.distanceRight >= 20 && that.distanceRight <= 1000) {
						imgsuspension[0].style.right = that.distanceRight + 'px';
						that.distanceRight = that.distanceRight + 40;
						that.distanceLeft = that.distanceRight;
					}
					if (that.distanceRight >= 1000) {
						if (that.distanceLeft >= 20) {
							imgsuspension[0].style.right = that.distanceLeft + 'px';
							that.distanceLeft = that.distanceLeft - 40;
							if (that.distanceLeft <= 20) {
								that.distanceRight = that.distanceLeft;
							}
						}
					}
				}, 200);
				if (value) {
					clearInterval(this.time);
					//切换图片
					this.$refs.img.src = require('@/assets/static/home/2.gif')
				}
			},
			//这个方法用于继续动画和切换图片
			suspensionTwo() {
				this.suspension(false);
				this.$refs.img.src = require('@/assets/static/home/1.gif')
			}
		},
	}
</script>

<style scoped>
	.headMain{
		background-image: url(../../assets/static/home/4.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
	}
	.head {
		width: 100%;
		height: 55px;
		
	}

	.headOne {
		position: relative;
		float: left;
		margin-top: 10px;
		margin-left: 15px;
	}

	.headTwo {
		float: right;
		margin-top: 2px;
		margin-right: 20px;
	}


	/* 悬浮小人物 */
	.suspension {
		position: fixed;
		right: 0px;
		bottom: 0px;
		width: 150px;
		height: 100px;
		z-index: 10;
	}
	.navigation{
		border-top: 1px solid aliceblue;
	}
</style>
